import React from 'react';
import { Modal, Table, Popconfirm, Divider, Button } from 'antd';
import EditForm from './EditForm'


class Invite extends React.Component {
    state = {
        visible: false,
        list: [],
        invinfo: {
            username: '',
            code: '',
            remark: '',
        }
    }
    componentDidMount() {
        //获取表格list数据
    }

    render() {
        // const columns = [

        //     {
        //         title: '账户',
        //         dataIndex: 'username'
        //     },
        //     {
        //         title: '代码',
        //         dataIndex: 'code'
        //     },
        //     {
        //         title: '备注',
        //         dataIndex: 'remark'
        //     },
        //     {
        //         title: '操作',
        //         key: 'action',
        //         render: (text, record) => (
        //             <span>
        //                 <a className='a_edit' onClick={() => this._handleUpdate(record)}>修改</a>
        //                 <Divider type="vertical" />
        //                 <Popconfirm title="确认删除?" okText='删除' cancelText='取消' onConfirm={() => this._handleDelete(record)}>
        //                     <a style={{ color: 'red' }}>删除</a>
        //                 </Popconfirm>
        //             </span>
        //         ),
        //     },
        // ]
        return <div>
            <div>
                <Button onClick={this._handleAdd} type="dashed" icon='plus'>新增</Button>
            </div>
            {/* <div className='content-wrap mt10'>
                <Table
                    columns={columns}
                    dataSource={this.state.list}
                    rowKey='id'
                    rowSelection={null}
                />
            </div> */}
            <Modal title="表单操作" okText='保存' cancelText='取消'
                visible={this.state.visible}
                onOk={this._handleUpdate} onCancel={this._handleCancel} >
                <EditForm wrappedComponentRef={(inst) => { this.editForm = inst; }}
                    {...this.state.Editinfo} />
            </Modal>
        </div>
    }
    _handleAdd = () => {
        //点击按钮显示模态框
        this.setState({ visible: true, });
    }
    _handleDelete = (record) => {
        //删除记录操作
    }
    _handleOK = () => {
        //验证表单数据
        this.editForm.props.form.validateFields((err, values) => {
            if (!err) {
                //values 可获取到表单中所有键值数据  将数据进行保存操作
                // 清理表单数据
                this.editForm.props.form.resetFields();
            }
        });
    }
    _handleCancel = () => {
        // 清理表单数据
        this.editForm.props.form.resetFields();
        //隐藏模态框
        this.setState({ visible: false });
    }
    _handleUpdate = (record) => {
        //修改时，赋值表单数据
        let Editinfo = {
            username: record.username,
            code: record.code,
            remark: record.remark,
        }
        this.setState({ visible: false, Editinfo });
    }
}

export default Invite;
